<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灰鲸商城 - 品质生活首选</title>
    <!-- 引入 Axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 引入 Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 引入 Element Plus -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus"></script>
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../static/css/mall.css">
    <link rel="icon" href="../static/img/huijing_mall1.ico" type="image/x-icon">
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 导航栏颜色调整 */
        .navbar {
            background: linear-gradient(90deg, #69b1ff, #7ed321);
            transition: all 0.3s ease;
        }

        /* 系统后台按钮样式优化 */
        #goto-collect {
            background-color: rgba(255, 255, 255, 0.2);
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 6px 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        #goto-collect:hover {
            background-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }

        /* 确保下拉菜单中的用户名颜色正确 */
        .el-dropdown-link {
            color: #fff !important;
        }

        /* 登录表单优化 */
        .login-dialog .el-dialog__body {
            padding-top: 20px;
        }

        /* 登录标签样式优化 */
        .login-tabs {
            margin-bottom: 20px;
        }

        .login-tabs .el-tabs__nav {
            width: 100%;
            display: flex;
        }

        .login-tabs .el-tabs__item {
            flex: 1;
            text-align: center;
            padding: 10px 0;
        }

        /* 表单居中与间距优化 */
        .centered-form {
            width: 100%;
        }

        .centered-form .el-form-item {
            margin-bottom: 18px;
        }

        .centered-form .el-input {
            width: 100%;
        }

        /* 验证码按钮样式 */
        .code-button {
            width: 110px;
        }

        /* 登录按钮样式 */
        .login-button {
            width: 100%;
            height: 44px;
            font-size: 16px;
        }

        /* 忘记密码和注册引导样式 */
        .form-helper {
            text-align: center;
            margin-top: 15px;
            color: #606266;
        }

        .form-helper a {
            color: #409eff;
            text-decoration: none;
        }

        .form-helper a:hover {
            text-decoration: underline;
        }

        /* 强制与促销专区样式统一 */
        #about-section {
            padding: 4rem 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }
        #footer.promo-card {
            border-radius: 12px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }
        #footer.promo-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
        }
        #footer.promo-card .promo-content h3 {
            text-shadow: none;
        }
        #footer.promo-card .promo-content p,
        #footer.promo-card .promo-content ul {
            text-shadow: none;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="navbar-container">
            <a href="#" class="logo" @click.prevent="navigateTo('/')">
                <i class="fas fa-whale"></i>
                <span>灰鲸商城</span>
            </a>

            <div class="nav-links">
                <a href="#" class="nav-link" :class="{active: currentRoute === '/'}" @click.prevent="navigateTo('/')">首页</a>
                <a href="#" class="nav-link" :class="{active: currentRoute === '/new-arrivals'}" @click.prevent="navigateTo('/new-arrivals')">新品上市</a>
                <a href="#" class="nav-link" :class="{active: currentRoute === '/categories'}" @click.prevent="navigateTo('/categories')">商品分类</a>
                <a href="#" class="nav-link" :class="{active: currentRoute === '/promotions'}" @click.prevent="navigateTo('/promotions')">促销活动</a>
                <a href="#" class="nav-link" :class="{active: currentRoute === '/about'}" @click.prevent="navigateTo('/about')">关于我们</a>
            </div>

            <div class="auth-buttons">
                <!-- 超级管理员专属：返回系统后台按钮 -->
                <button id="goto-collect" class="btn-shop hidden md:flex items-center gap-2"
                        v-if="isLoggedIn && user.role === 'super_admin'"
                        @click="goToAdminPanel"
                        :loading="isLoadingUserInfo"
                >
                    <i class="fa fa-external-link"></i>
                    <span>返回系统后台</span>
                </button>

                <!-- 登录状态显示（普通用户/超级管理员通用） -->
                <template v-if="isLoggedIn">
                    <el-dropdown :disabled="isLoadingUserInfo">
            <span class="el-dropdown-link flex items-center">
              <el-avatar
                      :size="30"
                      :src="user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"
                      :loading="isLoadingUserInfo"
              ></el-avatar>
              <span style="margin-left: 8px; color: #fff;">{{ user.username || '用户' }}</span>
            </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="goToProfile">个人中心</el-dropdown-item>
                                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </template>

                <!-- 未登录状态显示 -->
                <template v-else>
                    <el-button
                            type="text"
                            class="text-white"
                            @click="goToLogin"
                            :loading="isLoadingUserInfo"
                    >
                        登录
                    </el-button>
                    <el-button
                            type="primary"
                            round
                            @click="goToRegister"
                            :loading="isLoadingUserInfo"
                    >
                        注册
                    </el-button>
                </template>
            </div>
        </div>
    </nav>

    <!-- 登录对话框 -->
    <el-dialog v-model="loginDialogVisible" title="登录" width="400px" center>
        <!-- 登录方式切换标签 -->
        <el-tabs v-model="loginTab" type="card" class="login-tabs">
            <el-tab-pane label="账号密码登录" name="passwordLogin"></el-tab-pane>
            <el-tab-pane label="验证码登录" name="codeLogin"></el-tab-pane>
        </el-tabs>

        <!-- 账号密码登录表单 -->
        <el-form
                v-if="loginTab === 'passwordLogin'"
                :model="loginForm"
                :rules="loginRules"
                ref="loginFormRef"
                class="centered-form"
        >
            <el-form-item prop="username">
                <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="loginForm.password" placeholder="请输入密码" show-password prefix-icon="el-icon-lock"></el-input>
            </el-form-item>
            <el-form-item>
                <div style="display: flex; justify-content: space-between; width: 100%;">
                    <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
                    <el-link type="primary" :underline="false" @click="resetPwdDialogVisible = true">忘记密码?</el-link>
                </div>
            </el-form-item>
        </el-form>

        <!-- 验证码登录表单 -->
        <el-form
                v-else
                :model="codeLoginForm"
                :rules="codeLoginRules"
                ref="codeLoginFormRef"
                class="centered-form"
        >
            <el-form-item prop="phone">
                <el-input v-model="codeLoginForm.phone" placeholder="请输入/手机号/邮箱" prefix-icon="el-icon-mobile-phone"></el-input>
            </el-form-item>
            <el-form-item prop="code">
                <div style="display: flex; gap: 10px;">
                    <el-input v-model="codeLoginForm.code" placeholder="请输入验证码" prefix-icon="el-icon-message"></el-input>
                    <el-button class="code-button" @click="sendLoginCode" :disabled="loginCodeCountdown > 0">
                        {{ loginCodeCountdown > 0 ? `${loginCodeCountdown}秒后重试` : '获取验证码' }}
                    </el-button>
                </div>
            </el-form-item>
        </el-form>

        <template #footer>
            <p style="color: #909399; margin-bottom: 0; text-align: center;">登录后即可查看商品详情并享受更多会员权益</p>
            <el-button type="primary" @click="handleLoginByTab" :loading="loginLoading" class="login-button">登 录</el-button>
            <div class="form-helper">
                还没有账号? <el-link type="primary" @click="goToRegister" :underline="false">立即注册</el-link>
            </div>
        </template>
    </el-dialog>

    <!-- 重置密码弹窗 -->
    <el-dialog v-model="resetPwdDialogVisible" title="重置密码" width="400px" center>
        <el-form
                :model="resetPwdForm"
                :rules="resetPwdRules"
                ref="resetPwdFormRef"
                class="centered-form"
        >
            <el-form-item prop="phone">
                <el-input v-model="resetPwdForm.phone" placeholder="请输入手机号" prefix-icon="el-icon-mobile-phone"></el-input>
            </el-form-item>
            <el-form-item prop="code">
                <div style="display: flex; gap: 10px;">
                    <el-input v-model="resetPwdForm.code" placeholder="请输入验证码" prefix-icon="el-icon-message"></el-input>
                    <el-button class="code-button" @click="sendResetCode" :disabled="resetCodeCountdown > 0">
                        {{ resetCodeCountdown > 0 ? `${resetCodeCountdown}秒后重试` : '获取验证码' }}
                    </el-button>
                </div>
            </el-form-item>
            <el-form-item prop="newPassword">
                <el-input v-model="resetPwdForm.newPassword" placeholder="请输入新密码" show-password prefix-icon="el-icon-lock"></el-input>
            </el-form-item>
            <el-form-item prop="confirmPassword">
                <el-input v-model="resetPwdForm.confirmPassword" placeholder="请确认新密码" show-password prefix-icon="el-icon-lock"></el-input>
            </el-form-item>
        </el-form>

        <template #footer>
            <el-button type="primary" @click="handleResetPwd" :loading="resetPwdLoading" class="login-button">重置密码</el-button>
        </template>
    </el-dialog>

    <!-- 注册对话框 -->
    <el-dialog v-model="registerDialogVisible" title="注册" width="400px" center>
        <el-form :model="registerForm" :rules="registerRules" ref="registerFormRef" class="centered-form">
            <el-form-item prop="username">
                <el-input v-model="registerForm.username" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
            </el-form-item>
            <el-form-item prop="phone">
                <el-input v-model="registerForm.phone" placeholder="请输入手机号" prefix-icon="el-icon-mobile-phone"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="registerForm.password" placeholder="请输入密码" show-password prefix-icon="el-icon-lock"></el-input>
            </el-form-item>
            <el-form-item prop="confirmPassword">
                <el-input v-model="registerForm.confirmPassword" placeholder="请确认密码" show-password prefix-icon="el-icon-lock"></el-input>
            </el-form-item>
            <el-form-item prop="code">
                <div style="display: flex; gap: 10px;">
                    <el-input v-model="registerForm.code" placeholder="请输入验证码" prefix-icon="el-icon-message"></el-input>
                    <el-button class="code-button" @click="sendCode" :disabled="codeCountdown > 0">
                        {{ codeCountdown > 0 ? `${codeCountdown}秒后重试` : '获取验证码' }}
                    </el-button>
                </div>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="handleRegister" :loading="registerLoading" class="login-button">注 册</el-button>
            <div class="form-helper">
                已有账号? <el-link type="primary" @click="goToLogin" :underline="false">立即登录</el-link>
            </div>
        </template>
    </el-dialog>


    <!-- 英雄区域 -->
    <section class="hero" id="hero">
        <div class="hero-content">
            <h1 class="hero-title fade-in">发现品质生活</h1>
            <p class="hero-subtitle fade-in delay-1">灰鲸商城 - 为您精选全球好物</p>

            <div class="search-bar fade-in delay-2">
                <el-input placeholder="搜索您喜欢的商品..." size="large">
                    <template #append>
                        <el-button icon="el-icon-search"></el-button>
                    </template>
                </el-input>
            </div>
        </div>
    </section>

    <!-- 热门商品 -->
    <section class="section" id="products-section">
        <h2 class="section-title">新品上市</h2>

        <div class="products-grid">
            <div class="product-card fade-in" v-for="product in products" :key="product.id" @click="showProductDetail(product)">
                <span class="product-badge" v-if="product.discount">限时{{ product.discount }}折</span>
                <img :src="product.main_image" class="product-image" :alt="product.name">

                <div class="product-content">
                    <h3 class="product-title">{{ product.name }}</h3>
                    <p class="product-desc">{{ product.description }}</p>

                    <div class="product-price">
                        <div>
                            <span class="price-current">¥{{ product.price }}</span>
                            <span class="price-old" v-if="product.original_price">¥{{ product.original_price }}</span>
                        </div>
                        <el-button type="text" icon="el-icon-view" circle></el-button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 商品分类 -->
    <section class="section" id="categories-section" style="background-color: #f5f7fa; border-radius: 16px; margin: 2rem auto;">
        <h2 class="section-title">商品分类</h2>

        <div class="categories">
            <div class="category-card fade-in delay-1" v-for="category in categories" :key="category.id">
                <i class="category-icon" :class="category.icon"></i>
                <h4 class="category-name">{{ category.name }}</h4>
                <p class="category-count">{{ category.count }}件商品</p>
            </div>
        </div>
    </section>

    <!-- 促销专区 -->
    <section class="section" id="promotions-section">
        <h2 class="section-title">限时促销</h2>

        <el-carousel height="500px" :interval="5000" arrow="always">
            <el-carousel-item v-for="promo in promotions" :key="promo.id">
                <div class="promo-card" :style="{ backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(' + promo.main_image + ')' }">
                    <div class="promo-content">
                        <h3>{{ promo.title }}</h3>
                        <p>{{ promo.description }}</p>
                        <el-button type="danger" size="large" round>立即抢购</el-button>
                    </div>
                </div>
            </el-carousel-item>
        </el-carousel>
    </section>

    <!-- 关于我们 -->
    <section class="section" id="about-section">
        <h2 class="section-title" >关于我们</h2>

        <div  id="footer" class="promo-card fade-in delay-1" style="height: auto; min-height: 400px; background: #fff; display: block; padding: 40px; position: relative;">
            <!-- 关于我们标识（与促销卡片视觉呼应） -->
            <span style="position: absolute; top: 20px; right: 20px; background-color: #f72585; color: #fff; padding: 6px 16px; border-radius: 24px; font-size: 0.9rem; font-weight: 600; z-index: 2;">品牌介绍</span>

            <!-- 内容容器（保持与促销卡片内容区布局逻辑一致） -->
            <div class="promo-content" style="max-width: 100%; padding: 0; text-align: left; color: #333;">
                <!-- 公司简介 -->
                <div class="about-section mb-8">
                    <h3 style="font-size: 1.8rem; font-weight: 700; margin-bottom: 16px; color: #222;">公司简介</h3>
                    <p style="font-size: 1rem; line-height: 1.8; margin-bottom: 12px; color: #666;">
                        灰鲸商城成立于2020年，是一家专注于高品质生活产品的电商平台。我们致力于为消费者提供精选全球好物，打造一站式购物体验。
                    </p>
                    <p style="font-size: 1rem; line-height: 1.8; color: #666;">
                        凭借对品质的执着追求和对客户体验的极致关注，灰鲸商城已迅速成长为行业内具有影响力的电商品牌，拥有数百万忠实用户。
                    </p>
                </div>

                <!-- 我们的使命 -->
                <div class="about-section mb-8">
                    <h3 style="font-size: 1.8rem; font-weight: 700; margin-bottom: 16px; color: #222;">我们的使命</h3>
                    <p style="font-size: 1rem; line-height: 1.8; color: #666;">
                        灰鲸商城的使命是"让每个人都能享受高品质生活"。我们相信，优质的产品不应该是少数人的特权，而应该是每个人都能轻松拥有的生活元素。
                    </p>
                </div>

                <!-- 核心价值观 -->
                <div class="about-section">
                    <h3 style="font-size: 1.8rem; font-weight: 700; margin-bottom: 16px; color: #222;">商城理念</h3>
                    <ul style="font-size: 1rem; line-height: 1.8; color: #666; list-style-type: disc; padding-left: 24px;">
                        <li style="margin-bottom: 10px;"><strong>品质至上</strong> - 严格把控每一件商品的质量，为用户提供放心产品</li>
                        <li style="margin-bottom: 10px;"><strong>客户第一</strong> - 始终将用户体验放在首位，持续提升服务质量</li>
                        <li style="margin-bottom: 10px;"><strong>诚信经营</strong> - 坚持诚信为本，打造值得信赖的电商平台</li>
                        <li><strong>创新进取</strong> - 不断创新商业模式和服务方式，引领行业发展</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer" >
        <div class="footer-container">
            <div>
                <div class="footer-logo">
                    <i class="fas fa-whale"></i>
                    <span>灰鲸商城</span>
                </div>
                <p class="footer-about">
                    灰鲸商城致力于为消费者提供高品质的商品和优质的购物体验，精选全球好物，打造一站式购物平台。
                </p>
                <div class="footer-social">
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-qq"></i></a>
                    <a href="#"><i class="fab fa-tiktok"></i></a>
                </div>
            </div>

            <div>
                <h4 class="footer-title">购物指南</h4>
                <div class="footer-links">
                    <a href="#" class="footer-link">购物流程</a>
                    <a href="#" class="footer-link">会员介绍</a>
                    <a href="#" class="footer-link">常见问题</a>
                    <a href="#" class="footer-link">联系客服</a>
                </div>
            </div>

            <div>
                <h4 class="footer-title">配送方式</h4>
                <div class="footer-links">
                    <a href="#" class="footer-link">上门自提</a>
                    <a href="#" class="footer-link">211限时达</a>
                    <a href="#" class="footer-link">配送服务查询</a>
                    <a href="#" class="footer-link">配送费收取标准</a>
                </div>
            </div>

            <div>
                <h4 class="footer-title">支付方式</h4>
                <div class="footer-links">
                    <a href="#" class="footer-link">货到付款</a>
                    <a href="#" class="footer-link">在线支付</a>
                    <a href="#" class="footer-link">分期付款</a>
                    <a href="#" class="footer-link">公司转账</a>
                </div>
            </div>

            <div>
                <h4 class="footer-title">售后服务</h4>
                <div class="footer-links">
                    <a href="#" class="footer-link">售后政策</a>
                    <a href="#" class="footer-link">价格保护</a>
                    <a href="#" class="footer-link">退款说明</a>
                    <a href="#" class="footer-link">返修/退换货</a>
                </div>
            </div>
        </div>

        <div class="footer-bottom">
            © 2023 灰鲸商城 版权所有 | ICP备案号: 鲁ICP备12345678号-1
        </div>
    </footer>

</div>

<script src="../static/js/mall.js"></script>
</body>
</html>